<template>
  <el-form-item label="子表单弹窗">
    <el-switch v-model="optionModel.childForm" @change="changeChildForm"></el-switch>
  </el-form-item>
  <el-form-item v-if="optionModel.childForm" label="请选择子表单">
    <!--    <el-input clearable v-model="optionModel.childFormCode" @keydown.enter="loadChildForm"></el-input>-->
    <el-select
        v-model="optionModel.childFormCode"
        filterable
        clearable
        placeholder="请选择已发布的子表单"
        @change="loadChildFormJson">
      <el-option
          v-for="item in childForms"
          :key="item.pageCode"
          :label="item.pageName"
          :value="item.pageCode">
      </el-option>
    </el-select>
  </el-form-item>
</template>
<script>
import {loadFormJson, loadFormJsonWithPageCode, loadFormListWithPageFlag} from "@/api/form";

export default {
  name: "childForm-editor",
  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
  },
  data() {
    return {
      childForms: []
    }
  },
  mounted() {
    console.log('childForm-editor mounted')
    if (this.optionModel.childForm) {
      this.loadChildForms()
    }
  },
  methods: {
    changeChildForm(value) {
      if (value) {
        this.optionModel.service.enabled && (this.optionModel.service.enabled = false)
        this.loadChildForms()
      }
    },
    async loadChildForms() {
      const pageFlag = this.designer?.vueInstance?.globalDsv.pageData?.pageFlag
      this.childForms = (await loadFormListWithPageFlag(pageFlag)).data
      // console.log('loadChildForms');
      if (this.optionModel.childFormCode) {
        this.loadChildFormJson(this.optionModel.childFormCode)
      }
    },
    async loadChildFormJson(pageCode) {
      if (pageCode) {
        const childFormRef = this.designer?.formWidget?.widgetRefList?.[this.selectedWidget.id]?.$refs?.vformRender
        try {
          const res = await loadFormJsonWithPageCode(pageCode)
          childFormRef.setFormJson(res.data)
        } catch (err) {
          console.log('加载子表单错误!')
          throw err
        }
      }
    }
  }
}
</script>


<style scoped>

</style>
